<template>
  <div>
    <fheader style="position: absloute; top: 0"></fheader>
    <div style="display: flex; margin: 100px 200px; height: 500px">
      <div style="height: 100%">
        <img :src="buyList.pictUrl" style="width: 500px; height: 100%" />
      </div>
      <div style="margin-left: 100px">
        <h1>{{ buyList.title }}</h1>
        <div>
          价格：<span
            style="
              font-weight: bold;
              font-size: 30px;
              color: red;
              margin-left: 40px;
            "
            >{{ buyList.Price }}</span
          >
        </div>
        <div style="display: flex; margin-top: 30px">
          <div>产地</div>
          <div style="margin-left: 60px">{{ buyList.shopTitle }}</div>
        </div>
        <div>前往淘宝购买</div>
      </div>
    </div>
    
  </div>
</template>

<script>
import fheader from "@/components/Header.vue";
export default {
  components: {
    fheader,
  },
  data() {
    return {
      msg: "",
      buyList: {},
    };
  },
  created() {
    this.msg = localStorage.getItem("msg");
    this.axios({
      method: "get",
      url: `https://api.iyk0.com/tbsp/?msg=${this.msg}&type=json`,
      responseType: "stream",
    }).then((res) => {
      this.buyList = res.data.data[0];
      console.log(this.buyList);
      // this.newsList = res.data.data
      // this.total = res.data.sum
    });
  },
};
</script>

<style>
</style>
